<template>
  <div class="w-full statistical-center">
    <statisticalHeader />
    <div class="px-40px pb-60px m--9px flex flex-1 gap-18px flex-col">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-12px text-28px fw-700">
          <div class="flex items-center">
            <el-date-picker
              popper-class="popper-date-class"
              v-model="queryDate"
              type="daterange"
              placeholder="请选择日期"
              value-format="YYYYMMDD"
              :clearable="false"
            />
          </div>
          <ClassStudentCascader @change="cascaderChange" />
        </div>
        <div>
          <aiGenerateReport ref="aiGenerateReportRef" :sendContent="sendContent" :roleId="49" />
        </div>
      </div>
      <el-scrollbar
        ref="echartWarpRef"
        class="statistical-center-content"
        view-class="pb-60px flex gap-20px flex-wrap"
        v-loading="loading"
      >
        <div class="echart-card flex flex-col justify-between w-909px">
          <Echart
            :width="getViewportPx(860)"
            :height="getViewportPx(400)"
            :options="getPieChartOption()"
          />
          <div class="flex justify-end pr-50px text-#666">单位：分钟</div>
          <Echart
            :width="getViewportPx(860)"
            :height="getViewportPx(430)"
            :options="getBarChartOption()"
          />
        </div>
        <div class="echart-card flex flex-col justify-between w-909px">
          <Echart
            :width="getViewportPx(860)"
            :height="getViewportPx(400)"
            :options="getPieChartOption(1)"
          />
          <div class="flex justify-end pr-50px text-#666">单位：分钟</div>
          <Echart
            :width="getViewportPx(860)"
            :height="getViewportPx(430)"
            :options="getBarChartOption(1)"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getViewportPx } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { useBarOptions } from '@/hooks/chart/useBarOptions'
import { usePieOptions } from '@/hooks/chart/usePieOptions'
import statisticalHeader from './components/statisticalHeader.vue'
import aiGenerateReport from './components/aiGenerateReport.vue'
import { getAxisNameConfig } from './utils'
import { formatDate } from '@/utils/formatTime'

const pageData: any = ref({})
const loading = ref(true)
const cascaderParams: any = ref({})
const nowDateStr = formatDate(new Date(), 'YYYYMMDD')
const queryDate = ref([nowDateStr, nowDateStr])
const pathLabels = ref([])
const aiGenerateReportRef = ref()

const queryParams = computed(() => {
  return {
    queryDate: queryDate.value[0],
    startTime: queryDate.value[0],
    endTime: queryDate.value[1],
    ...cascaderParams.value
  }
})
// 发送内容
const sendContent = computed(() => {
  return {
    startTime: queryParams.value.startTime,
    endTime: queryParams.value.endTime,
    type: pathLabels.value.length - 1,
    target: pathLabels.value.join('-'),
    data: pageData.value
  }
})
const init = async () => {
  try {
    loading.value = true
    pageData.value = await statisticalCenterApi.getChildrenInterest(queryParams.value)
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
const cascaderChange = async (params, cascaderPathLabels) => {
  cascaderParams.value = params
  pathLabels.value = cascaderPathLabels
}
const getChartData = (baseData, valFn?: any) => {
  return baseData
    ? baseData.map((item) => {
        return {
          name: item.locationName || '未知',
          value: valFn?.(item) || Math.floor((item.durationSeconds / 60) * 100) / 100 || 0
        }
      })
    : []
}
const getPieChartOption = (index?: number) => {
  return usePieOptions(getChartData(pageData.value?.[index || 0]?.details), {
    title: {
      text: index === 1 ? '室内区' : '户外区',
      left: 'center'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      textStyle: {
        width: 150,
        overflow: 'truncate'
      },
      right: getViewportPx(20),
      top: 'center'
    }
  }).baseOptions
}
const getBarChartOption = (index?: number) => {
  return useBarOptions(getChartData(pageData.value?.[index || 0]?.details), {
    title: {
      text: '',
      left: 'center'
    },
    grid: {
      left: getViewportPx(150),
      right: getViewportPx(20)
    },
    xAxis: {
      type: 'value',
      ...getAxisNameConfig('单位：分钟', {
        nameLocation: 'center',
        nameTextStyle: {
          fontSize: parseInt(getViewportPx(16, true)),
          padding: [parseInt(getViewportPx(30, true)), 0, 0, parseInt(getViewportPx(650, true))]
        }
      })
    },
    yAxis: {
      axisLabel: {
        width: 120,
        overflow: 'truncate'
      }
    },
    series: [
      {
        barMaxWidth: getViewportPx(18),
        barMinWidth: getViewportPx(2)
      }
    ]
  }).baseOptions
}
watch(
  () => queryParams.value,
  () => {
    init()
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
@import url('./index.scss');

.echart-card {
  padding: 15px 0;
}
</style>
